<template>
  <div style="display: flex; justify-content: space-between; flex-wrap: wrap">
    <EchartsItemDetails
      title=""
      :row="2"
      ref="options1"
      :option="options1"
      echartId="fourth-1"
    />
    <EchartsItemDetails
      title=""
      :row="2"
      ref="options2"
      :option="options2"
      echartId="fourth-2"
    />
    <CountFormula
      v-for="(item, index) in list"
      :key="index"
      :data="item"
      :showValue="getValue(item.str)"
    />
  </div>
</template>
<script>
import { queryNcx } from "@/api/quality/chart";
export default {
  data() {
    return {
      startTime: "",
      endTime: "",
      timeType: "0",
      options1: {
        title: {
          text: "脑出血手术率",
          left: "center",
        },
        grid: {
          height: "200px",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "bar",
          },
        ],
      },
      options2: {
        title: {
          text: "数据对比",
          left: "center",
        },
        grid: {
          height: "200px",
        },
        legend: {
          top: "10%",
          data: [
            "开颅血肿清除术",
            "去骨瓣减压术脑室镜下血肿抽吸术",
            "钻孔血肿抽吸术",
            "复合手术人数",
            "其他人数",
          ],
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "开颅血肿清除术",
            data: [1, 3, 5, 3, 5, 1, 3],
            type: "line",
            smooth: true,
          },
          {
            name: "去骨瓣减压术脑室镜下血肿抽吸术",
            data: [5, 3, 3, 2, 3, 1, 1],
            type: "line",
            smooth: true,
          },
          {
            name: "钻孔血肿抽吸术",
            data: [2, 1, 2, 1, 1, 2, 2],
            type: "line",
            smooth: true,
          },
          {
            name: "复合手术人数",
            data: [3, 4, 4, 3, 4, 2, 2],
            type: "line",
            smooth: true,
          },
          {
            name: "其他人数",
            data: [4, 4, 4, 2, 1, 2, 4],
            type: "line",
            smooth: true,
          },
        ],
      },
      showListData: {
        ctjcl: 0,
        fyscl: 0,
        jxncxkfzll: 0,
        jxncxpgl: 0,
        jyywzll: 0,
        knnzzll: 0,
        qzbyscl: 0,
        sjmxsyfl: 0,
        tygnscl: 0,
        ywzll: 0,
        zybsl: 0,
      },
      list: [
        {
          text: "急性脑出血患者严重程度评估率",
          numerator: "入院6h内行脑出血评分评估的急性脑出血患者数",
          numeratorValue: "0",
          denominator: "同期住院脑出血患者总数",
          denominatorValue: "0",
          str: "jxncxpgl",
        },
        {
          text: "急性脑出血患者康复治疗率",
          numerator: "进行康复治疗的急性脑出血患者数",
          numeratorValue: "0",
          denominator: "同期住院的急性脑出血患者总数",
          denominatorValue: "0",
          str: "jxncxkfzll",
        },
        {
          text: "急性脑出血患者发病6h内降压药物治疗率",
          numerator: "发病6h内给予降压药物治疗的急性脑出血患者数",
          numeratorValue: "0",
          denominator: "同期发病6h内到院的急性脑出血患者总数",
          denominatorValue: "0",
          str: "ywzll",
        },
        {
          text: "脑出血患者住院7d内潜在病因筛查率",
          numerator: "住院7d内完善潜在病因筛查脑出血患者数",
          numeratorValue: "0",
          denominator: "同期需筛查的住院脑出血患者总数",
          denominatorValue: "0",
          str: "qzbyscl",
        },
        {
          text: "抗凝相关脑出血患者抗凝逆转治疗率",
          numerator: "抗凝相关脑出血患者使用药物逆转治疗人数",
          numeratorValue: "0",
          denominator: "同期到院的抗凝相关脑出血患者总数",
          denominatorValue: "0",
          str: "knnzzll",
        },
        {
          text: "急性脑出血患者卒中相关肺炎筛查率",
          numerator: "进行卒中相关肺炎筛查的急性脑出血患者数",
          numeratorValue: "0",
          denominator: "同期住院的急性脑出血患者总数",
          denominatorValue: "0",
          str: "fyscl",
        },
        {
          text: "脑出血患者发病24h内复查头颅CT等影像学检查率",
          numerator: "发病24h内复查头颅CT等影像学的脑出血患者数",
          numeratorValue: "0",
          denominator: "同期发病6h内到院的脑出血患者总数",
          denominatorValue: "0",
          str: "ctjcl",
        },
        {
          text: "合并高血压的脑出血患者出院时降压药物治疗率",
          numerator: "出院时给予降压药物治疗的合并高血压脑出血患者数",
          numeratorValue: "0",
          denominator: "同期住院的合并高血压脑出血患者总数",
          denominatorValue: "0",
          str: "jyywzll",
        },
        {
          text: "脑出血患者入院48h内深静脉血栓预防率",
          numerator: "脑出血患者人院48h内给予DVT预防措施的人数",
          numeratorValue: "0",
          denominator: "同期住院脑出血患者总数",
          denominatorValue: "0",
          str: "sjmxsyfl",
        },
        {
          text: "急性脑出血患者住院病死率",
          numerator: "住院期间死亡的急性脑出血患者数",
          numeratorValue: "0",
          denominator: "同期住院的急性脑出血患者总数",
          denominatorValue: "0",
          str: "zybsl",
        },
        {
          text: "脑出血患者吞咽功能筛查率",
          numerator: "进食、水前进行吞咽功能筛查的住院脑出血患者数",
          numeratorValue: "0",
          denominator: "同期住院脑出血患者总数",
          denominatorValue: "0",
          str: "tygnscl",
        },
      ],
    };
  },
  methods: {
    // 新数据变化, 刷新chart图表
    refresh(jmrsData) {
      const xAxisData = jmrsData.map((item) => {
        return this.$moment(item.time).format("yyyy-MM-dd");
      });
      const seriesData = jmrsData.map((item) => {
        return item.gailv;
      });
      this.options1.xAxis.data = [...xAxisData];
      this.options1.series[0].data = [...seriesData];
      this.$refs.options1.updateChart();
    },
    // 修改 开始/结束时间 及 查询类型
    changeSearchVal(param) {
      this.startTime = param.startTime;
      this.endTime = param.endTime;
      this.timeType = param.timeType;
      this.changeDetail();
    },
    changeDetail() {
      const param = {
        endTime: this.endTime,
        startTime: this.startTime,
        timeType: this.timeType,
      };
      queryNcx(param).then((res) => {
        this.showListData = { ...res.data };
      });
    },
    getValue(str) {
      return this.showListData[str] || 0;
    },
  },
};
</script>
<style scoped></style>
